<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form ref="queryForm" :inline="true" :model="queryData">
				<el-row>
					<el-col :span="24" class="flex-warp-container">
						<el-form-item
							:label="`${$t('common.belong_merchant')}:`"
							class="flex-row-container"
							label-width="77px"
						>
							<merchant-select
								v-model="queryData.merchantId"
								:merchantInfo.sync="merchantObj"
							></merchant-select>
						</el-form-item>
						<el-form-item
							:label="$t('agent.agent_account') + ':'"
							prop="proxyName"
						>
							<el-input
								v-model="queryData.proxyName"
								class="input-with-select"
								:placeholder="$t('common.please_enter')"
								clearable
								size="medium"
							></el-input>
						</el-form-item>
						<el-form-item
							:label="`${$t('common.top_agent')}:`"
							class="flex-row-container"
							label-width="77px"
							prop="parentProxyName"
						>
							<el-input
								style="width: 200px"
								v-model="queryData.parentProxyName"
								size="medium"
								clearable
								:maxlength="11"
								autocomplete="off"
								v-symbols
								:placeholder="$t('common.please_enter')"
								oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
							></el-input>
						</el-form-item>
						<el-form-item
							:label="
								`${$t(
									'funds.fund_audit.belong_general_agent'
								)}:`
							"
							class="flex-row-container"
							label-width="77px"
							prop="topProxyName"
						>
							<el-input
								v-model="queryData.topProxyName"
								clearable
								size="medium"
								v-input="{ name: 'num_alp' }"
								style="width: 220px"
								:placeholder="$t('common.please_enter')"
							></el-input>
						</el-form-item>
						<el-form-item
							label="结算周期:"
							class="flex-row-container"
							label-width="77px"
						>
							<el-date-picker
								v-model="searchTime"
								size="medium"
								:picker-options="pickerShortcut2"
								format="yyyy-MM-dd"
								type="daterange"
								range-separator="-"
								:start-placeholder="$t('common.start_date')"
								:end-placeholder="$t('common.end_date')"
								align="right"
								:clearable="false"
								:default-time="defaultTime"
							></el-date-picker>
						</el-form-item>
						<el-form-item
							:label="`${$t('funds.user_name')}:`"
							class="flex-row-container"
							label-width="77px"
						>
							<el-input
								v-model="queryData.memberName"
								clearable
								size="medium"
								:placeholder="$t('common.please_enter')"
								:disabled="loading"
								maxlength="11"
							></el-input>
						</el-form-item>
						<el-form-item style="margin-left: 10px">
							<el-button
								type="primary"
								icon="el-icon-search"
								:disabled="loading"
								size="medium"
								@click="search"
							>
								{{ $t('common.search') }}
							</el-button>
							<el-button
								icon="el-icon-refresh-left"
								:disabled="loading"
								size="medium"
								@click="reset"
							>
								{{ $t('common.reset') }}
							</el-button>
							<el-button
								v-if="hasPermission('90900053')"
								icon="el-icon-download"
								type="warning"
								:disabled="loading"
								:loading="exportBtnLoading"
								size="medium"
								@click="handleExportExcel"
							>
								{{ $t('common.export') }}
							</el-button>
							<el-button
								type="success"
								icon="el-icon-sort"
								:disabled="loading"
								size="medium"
								@click="openColSettings"
							>
								{{ $t('common.row_set') }}
							</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				ref="tables"
				v-loading="loading"
				border
				size="mini"
				:data="tableData"
				style="width: 100%"
				class="small-size-table"
				:header-cell-style="getRowClass"
				:max-height="tableHeight"
				element-loading-spinner="el-icon-loading"
				highlight-current-row
			>
				<el-table-column
					align="center"
					label="结算周期"
					min-width="200"
					show-overflow-tooltip
					v-if="dialogColumnData['结算周期']"
				>
					<template slot-scope="scope">
						{{
							getRebateCycle(
								scope.row.cycleStartDate,
								scope.row.cycleEndDate
							)
						}}
					</template>
				</el-table-column>
				<!-- <el-table-column
					prop="billNo"
					align="center"
					min-width="260"
					:label="$t('funds.proxy_member_funds_record.bill_name')"
					show-overflow-tooltip
					v-if="
						dialogColumnData[
							$t('funds.proxy_member_funds_record.bill_name')
						]
					"
				>
					<template slot-scope="scope">
						{{ scope.row.billNo || '-' }}
					</template>
				</el-table-column> -->
				<el-table-column
					align="center"
					:label="$t('funds.user_name')"
					min-width="180"
					v-if="dialogColumnData[$t('funds.user_name')]"
				>
					<template slot-scope="scope">
						{{ scope.row.memberName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="$t('common.agent_number')"
					min-width="180"
					v-if="dialogColumnData[$t('common.agent_number')]"
				>
					<template slot-scope="scope">
						{{ scope.row.proxyName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="$t('common.components.agent_level')"
					v-if="dialogColumnData[$t('common.components.agent_level')]"
				>
					<template slot-scope="scope">
						{{ scope.row.proxyLevel || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="$t('common.belong_merchant')"
					min-width="180"
					v-if="dialogColumnData[$t('common.belong_merchant')]"
				>
					<template slot-scope="scope">
						{{ scope.row.merchantName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="$t('common.top_agent')"
					min-width="180"
					v-if="dialogColumnData[$t('common.top_agent')]"
				>
					<template slot-scope="scope">
						{{ scope.row.parentProxyName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="$t('funds.fund_audit.belong_general_agent')"
					min-width="180"
					v-if="
						dialogColumnData[
							$t('funds.fund_audit.belong_general_agent')
						]
					"
				>
					<template slot-scope="scope">
						{{ scope.row.topProxyName || '-' }}
					</template>
				</el-table-column>
				<!-- <el-table-column
					align="center"
					:label="$t('funds.proxy_member_funds_record.game_name')"
					v-if="
						activityListField[
							$t('funds.proxy_member_funds_record.game_name')
						]
					"
				>
					<template slot-scope="scope">
						{{ scope.row.gameName || '-' }}
					</template>
				</el-table-column> -->
				<!-- <el-table-column
					align="center"
					:label="$t('dxn.card_ables_list.table_id')"
					v-if="activityListField[$t('dxn.card_ables_list.table_id')]"
				>
					<template slot-scope="scope">
						{{ scope.row.gameTable || '-' }}
					</template>
				</el-table-column> -->
				<el-table-column
					align="center"
					label="打赏金额"
					min-width="180"
					v-if="dialogColumnData['打赏金额']"
				>
					<template slot-scope="scope">
						{{
							scope.row.currency
								? handleNumber(
										scope.row.currency,
										scope.row.amount || 0
								  )
								: '-'
						}}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="打赏时间"
					min-width="200"
					v-if="dialogColumnData['打赏时间']"
				>
					<template slot-scope="scope">
						{{ scope.row.rewardAt || '-' }}
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<el-dialog
			:title="$t('common.row_set')"
			center
			:visible.sync="colSettings.visible"
			width="475px"
			class="setting-div"
		>
			<div>
				<el-link type="primary" class="mb15" @click="clickDel">
					复原缺省
				</el-link>
			</div>
			<div
				v-for="(value, name1) in activityListField"
				:key="name1"
				class="setting-div"
			>
				<el-checkbox v-model="dialogColumnData[name1]">
					{{ name1 }}
				</el-checkbox>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="colSettings.visible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="handleOrderList">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'
const today = () => dayjs().format('YYYY-MM-DD')
export default {
	name: routerNames.noOutBillList,
	components: { MainContent },
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			searchTime: [today(), today()],
			pageNum: 1,
			queryData: {
				// cycleStartDate: '',
				// cycleEndDate: '',
				// merchantId: '',
				// memberName: '',
				// parentProxyName: '',
				// proxyName: '',
				// topProxyName: ''
			},
			tableData: [],
			exportBtnLoading: false,
			merchantObj: '',
			colSettings: {
				visible: false,
				dialogColumnData: {}
			},
			activityListField: {
				结算周期: true,
				[this.$t('funds.proxy_member_funds_record.bill_name')]: true,
				[this.$t('funds.user_name')]: true,
				[this.$t('common.agent_number')]: true,
				[this.$t('common.components.agent_level')]: true,
				[this.$t('common.belong_merchant')]: true,
				[this.$t('common.top_agent')]: true,
				[this.$t('funds.fund_audit.belong_general_agent')]: true,
				// [this.$t('funds.proxy_member_funds_record.game_name')]: true,
				// [this.$t('dxn.card_ables_list.table_id')]: true,
				打赏金额: true,
				打赏时间: true
			}
		}
	},
	computed: {},
	watch: {},
	created() {
		this.initIndexDB('settementDetailsMemberReward', this.activityListField)
	},
	mounted() {},
	methods: {
		getRebateCycle(date1, date2) {
			date1 = date1 && dayjs(String(date1)).format('YYYY-MM-DD')
			date2 = date2 && dayjs(String(date2)).format('YYYY-MM-DD')
			if (date1 === date2) {
				return date1 || '-'
			} else {
				return date1 && date2 ? date1 + ' 至 ' + date2 : '-'
			}
		},
		handleParams() {
			let params = { ...this.getParams() }
			if (this.queryData) {
				params = {
					...params,
					...Object.keys(this.queryData).reduce((prev, item) => {
						if (this.queryData[item]) {
							prev[item] = this.queryData[item]
						}
						return prev
					}, {})
				}
			}

			params = {
				...params,
				cycleStartDate: dayjs(this.searchTime[0]).format('YYYY-MM-DD'),
				cycleEndDate: dayjs(this.searchTime[1]).format('YYYY-MM-DD')
			}
			return params
		},
		loadData() {
			this.loading = true
			this.$api
				.getSettementDetailsMemberRewardList(this.handleParams())
				.then((res) => {
					const { pageNum, pageSize, record, totalRecord } =
						res.data || {}
					this.pageNum = pageNum
					this.pageSize = pageSize
					this.tableData = record || []
					this.total = totalRecord || 0
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		reset() {
			this.pageNum = 1
			this.queryData = {}
			this.loadData()
		},
		handleExportExcel() {
			this.exportBtnLoading = true
			this.exportExcelPublic({
				api: 'getSettementDetailsMemberRewardListExport',
				params: this.handleParams()
			}).finally(() => {
				this.exportBtnLoading = false
			})
		},
		// 提交列设置数据
		handleOrderList() {
			this.colSettings.visible = false
			this.updateIndexDB()
		},
		// 打开列设置弹框
		openColSettings() {
			this.getIndexDB(this.activityListField)
			this.colSettings.visible = true
		},
		clickDel() {
			const activityListColumn = {}
			Object.keys(this.activityListField).forEach((item) => {
				activityListColumn[item] = true
			})
			this.dialogColumnData = Object.assign({}, activityListColumn)
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	> div {
		height: 100%;
	}
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
</style>
